<script lang="ts" setup>
  import { CourseHole } from '@/types/course';
  import { ref, onMounted } from 'vue';
  import { Message, Form } from '@arco-design/web-vue';
  import {
    queryCourseHole,
    createCourseHole,
    updateCourseHole,
  } from '@/api/course';

  const props = defineProps<{
    courseId: string;
    cupId: string;
    mode: string;
  }>();

  const emit = defineEmits(['close']);

  const loading = ref(false);
  const formData = ref<{
    frontHoleList: Partial<CourseHole>[];
    backHoleList: Partial<CourseHole>[];
  }>({
    frontHoleList: [],
    backHoleList: [],
  });

  const getTotal = (list: Partial<CourseHole>[], key: string) => {
    let i = 0;
    list.forEach((item) => {
      // @ts-ignore
      const value = item[key];
      if (value !== undefined) {
        i += value;
      }
    });
    return i;
  };

  const initEmptyHoleInfo = () => {
    const l1: Partial<CourseHole>[] = [];
    const l2: Partial<CourseHole>[] = [];
    for (let i = 1; i <= 18; i += 1) {
      const holeType = i <= 9 ? 0 : 1;
      const hole: Partial<CourseHole> = {
        holeType,
        holeIndex: i,
        courseId: props.courseId,
        cupId: props.cupId,
      };
      if (holeType === 0) {
        l1.push(hole);
      } else {
        l2.push(hole);
      }
    }
    formData.value.frontHoleList = l1;
    formData.value.backHoleList = l2;
  };
  const initHoleInfo = async () => {
    if (props.mode === 'edit') {
      try {
        loading.value = true;
        const res = await queryCourseHole(props.courseId, props.cupId);
        formData.value.frontHoleList = res.data.data
          .filter((i) => i.holeType === 0)
          .sort((a, b) => a.holeIndex - b.holeIndex);
        formData.value.backHoleList = res.data.data
          .filter((i) => i.holeType === 1)
          .sort((a, b) => a.holeIndex - b.holeIndex);
      } finally {
        loading.value = false;
      }
    } else {
      initEmptyHoleInfo();
    }
  };

  onMounted(() => {
    initHoleInfo();
  });

  const saving = ref(false);
  const formRef = ref<InstanceType<typeof Form> | null>(null);
  const handleSubmit = async () => {
    if (formRef.value) {
      const validate = await formRef.value.validate();
      if (!validate) {
        if (props.mode === 'create') {
          await createCourseHole([
            ...formData.value.frontHoleList,
            ...formData.value.backHoleList,
          ]);
          Message.success('新建成功');
          emit('close', true);
        } else {
          await updateCourseHole([
            ...formData.value.frontHoleList,
            ...formData.value.backHoleList,
          ]);
          Message.success('编辑成功');
          emit('close', true);
        }
      }
    }
  };
</script>

<template>
  <a-modal
    :title="mode === 'create' ? '新建球洞信息' : '编辑球洞信息'"
    :width="1100"
    visible
    :ok-loading="saving"
    @cancel="emit('close', false)"
    @before-ok="handleSubmit"
  >
    <a-alert v-if="mode === 'edit'" type="warning">
      注意，修改球洞信息后，历史成绩中的球洞信息也会跟着更新
    </a-alert>
    <a-alert v-if="mode === 'create'" type="warning">
      新建球洞信息后，旧的球洞信息会保留，作为历史成绩的凭据
    </a-alert>
    <div style="height: 12px"></div>
    <a-form ref="formRef" :model="formData" layout="vertical">
      <div class="hole-table">
        <div class="hole-table-header">前九洞</div>
        <div class="hole-table-tb">
          <div class="hole-table-item">
            <div>HOLE</div>
            <div class="hole-table-cell black">男子黑TEE</div>
            <div class="hole-table-cell gold">男子金TEE</div>
            <div class="hole-table-cell blue">男子蓝TEE</div>
            <div class="hole-table-cell white">男子白TEE</div>
            <div class="hole-table-cell red">男子红TEE</div>
            <div class="hole-table-cell purple">男子紫TEE</div>
            <div class="hole-table-cell gold">女子金TEE</div>
            <div class="hole-table-cell blue">女子蓝TEE</div>
            <div class="hole-table-cell white">女子白TEE</div>
            <div class="hole-table-cell red">女子红TEE</div>
            <div class="hole-table-cell purple">女子紫TEE</div>
            <div>PAR</div>
            <div>INDEX</div>
          </div>
          <div v-for="(hole, index) in formData.frontHoleList" :key="index">
            <div>
              {{ hole.holeIndex }}
            </div>
            <div>
              <a-form-item
                :field="`frontHoleList[${index}].maleBlack`"
                no-style
              >
                <a-input-number
                  v-model="formData.frontHoleList[index].maleBlack"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item :field="`frontHoleList[${index}].maleGold`" no-style>
                <a-input-number
                  v-model="formData.frontHoleList[index].maleGold"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item :field="`frontHoleList[${index}].maleBlue`" no-style>
                <a-input-number
                  v-model="formData.frontHoleList[index].maleBlue"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item
                :field="`frontHoleList[${index}].maleWhite`"
                no-style
              >
                <a-input-number
                  v-model="formData.frontHoleList[index].maleWhite"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item :field="`frontHoleList[${index}].maleRed`" no-style>
                <a-input-number
                  v-model="formData.frontHoleList[index].maleRed"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item
                :field="`frontHoleList[${index}].malePurple`"
                no-style
              >
                <a-input-number
                  v-model="formData.frontHoleList[index].malePurple"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item
                :field="`frontHoleList[${index}].femaleGold`"
                no-style
              >
                <a-input-number
                  v-model="formData.frontHoleList[index].femaleGold"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item
                :field="`frontHoleList[${index}].femaleBlue`"
                no-style
              >
                <a-input-number
                  v-model="formData.frontHoleList[index].femaleBlue"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item
                :field="`frontHoleList[${index}].femaleWhite`"
                no-style
              >
                <a-input-number
                  v-model="formData.frontHoleList[index].femaleWhite"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item
                :field="`frontHoleList[${index}].femaleRed`"
                no-style
              >
                <a-input-number
                  v-model="formData.frontHoleList[index].femaleRed"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item
                :field="`frontHoleList[${index}].femalePurple`"
                no-style
              >
                <a-input-number
                  v-model="formData.frontHoleList[index].femalePurple"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item :field="`frontHoleList[${index}].par`" no-style>
                <a-input-number
                  v-model="formData.frontHoleList[index].par"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item
                :field="`frontHoleList[${index}].holePriority`"
                no-style
              >
                <a-input-number
                  v-model="formData.frontHoleList[index].holePriority"
                  hide-button
                  :precision="0"
                  :min="1"
                  :max="18"
                />
              </a-form-item>
            </div>
          </div>
          <div>
            <div>TOTAL</div>
            <div class="hole-table-cell black">
              {{ getTotal(formData.frontHoleList, 'maleBlack') }}
            </div>
            <div class="hole-table-cell gold">
              {{ getTotal(formData.frontHoleList, 'maleGold') }}
            </div>
            <div class="hole-table-cell blue">
              {{ getTotal(formData.frontHoleList, 'maleBlue') }}
            </div>
            <div class="hole-table-cell white">
              {{ getTotal(formData.frontHoleList, 'maleWhite') }}
            </div>
            <div class="hole-table-cell red">
              {{ getTotal(formData.frontHoleList, 'maleRed') }}
            </div>
            <div class="hole-table-cell purple">
              {{ getTotal(formData.frontHoleList, 'malePurple') }}
            </div>
            <div class="hole-table-cell gold">
              {{ getTotal(formData.frontHoleList, 'femaleGold') }}
            </div>
            <div class="hole-table-cell blue">
              {{ getTotal(formData.frontHoleList, 'femaleBlue') }}
            </div>
            <div class="hole-table-cell white">
              {{ getTotal(formData.frontHoleList, 'femaleWhite') }}
            </div>
            <div class="hole-table-cell red">
              {{ getTotal(formData.frontHoleList, 'femaleRed') }}
            </div>
            <div class="hole-table-cell purple">
              {{ getTotal(formData.frontHoleList, 'femalePurple') }}
            </div>
            <div>
              {{ getTotal(formData.frontHoleList, 'par') }}
            </div>
            <div>-</div>
          </div>
        </div>
      </div>

      <div style="height: 12px"></div>

      <div class="hole-table">
        <div class="hole-table-header">后九洞</div>
        <div class="hole-table-tb">
          <div class="hole-table-item">
            <div>HOLE</div>
            <div class="hole-table-cell black">男子黑TEE</div>
            <div class="hole-table-cell gold">男子金TEE</div>
            <div class="hole-table-cell blue">男子蓝TEE</div>
            <div class="hole-table-cell white">男子白TEE</div>
            <div class="hole-table-cell red">男子红TEE</div>
            <div class="hole-table-cell purple">男子紫TEE</div>
            <div class="hole-table-cell gold">女子金TEE</div>
            <div class="hole-table-cell blue">女子蓝TEE</div>
            <div class="hole-table-cell white">女子白TEE</div>
            <div class="hole-table-cell red">女子红TEE</div>
            <div class="hole-table-cell purple">女子紫TEE</div>
            <div>PAR</div>
            <div>INDEX</div>
          </div>
          <div v-for="(hole, index) in formData.backHoleList" :key="index">
            <div>
              {{ hole.holeIndex }}
            </div>
            <div>
              <a-form-item
                :field="`frontHoleList[${index}].maleBlack`"
                no-style
              >
                <a-input-number
                  v-model="formData.backHoleList[index].maleBlack"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item :field="`backHoleList[${index}].maleGold`" no-style>
                <a-input-number
                  v-model="formData.backHoleList[index].maleGold"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item :field="`backHoleList[${index}].maleBlue`" no-style>
                <a-input-number
                  v-model="formData.backHoleList[index].maleBlue"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item :field="`backHoleList[${index}].maleWhite`" no-style>
                <a-input-number
                  v-model="formData.backHoleList[index].maleWhite"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item :field="`backHoleList[${index}].maleRed`" no-style>
                <a-input-number
                  v-model="formData.backHoleList[index].maleRed"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item
                :field="`backHoleList[${index}].malePurple`"
                no-style
              >
                <a-input-number
                  v-model="formData.backHoleList[index].malePurple"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item
                :field="`backHoleList[${index}].femaleGold`"
                no-style
              >
                <a-input-number
                  v-model="formData.backHoleList[index].femaleGold"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item
                :field="`backHoleList[${index}].femaleBlue`"
                no-style
              >
                <a-input-number
                  v-model="formData.backHoleList[index].femaleBlue"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item
                :field="`backHoleList[${index}].femaleWhite`"
                no-style
              >
                <a-input-number
                  v-model="formData.backHoleList[index].femaleWhite"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item :field="`backHoleList[${index}].femaleRed`" no-style>
                <a-input-number
                  v-model="formData.backHoleList[index].femaleRed"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item
                :field="`backHoleList[${index}].femalePurple`"
                no-style
              >
                <a-input-number
                  v-model="formData.backHoleList[index].femalePurple"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item :field="`backHoleList[${index}].par`" no-style>
                <a-input-number
                  v-model="formData.backHoleList[index].par"
                  hide-button
                  :precision="0"
                  :min="0"
                />
              </a-form-item>
            </div>
            <div>
              <a-form-item
                :field="`backHoleList[${index}].holePriority`"
                no-style
              >
                <a-input-number
                  v-model="formData.backHoleList[index].holePriority"
                  hide-button
                  :precision="0"
                  :min="1"
                  :max="18"
                />
              </a-form-item>
            </div>
          </div>
          <div>
            <div>TOTAL</div>
            <div class="hole-table-cell black">
              {{ getTotal(formData.backHoleList, 'maleBlack') }}
            </div>
            <div class="hole-table-cell gold">
              {{ getTotal(formData.backHoleList, 'maleGold') }}
            </div>
            <div class="hole-table-cell blue">
              {{ getTotal(formData.backHoleList, 'maleBlue') }}
            </div>
            <div class="hole-table-cell white">
              {{ getTotal(formData.backHoleList, 'maleWhite') }}
            </div>
            <div class="hole-table-cell red">
              {{ getTotal(formData.backHoleList, 'maleRed') }}
            </div>
            <div class="hole-table-cell purple">
              {{ getTotal(formData.backHoleList, 'malePurple') }}
            </div>
            <div class="hole-table-cell gold">
              {{ getTotal(formData.backHoleList, 'femaleGold') }}
            </div>
            <div class="hole-table-cell blue">
              {{ getTotal(formData.backHoleList, 'femaleBlue') }}
            </div>
            <div class="hole-table-cell white">
              {{ getTotal(formData.backHoleList, 'femaleWhite') }}
            </div>
            <div class="hole-table-cell red">
              {{ getTotal(formData.backHoleList, 'femaleRed') }}
            </div>
            <div class="hole-table-cell purple">
              {{ getTotal(formData.backHoleList, 'femalePurple') }}
            </div>
            <div>
              {{ getTotal(formData.backHoleList, 'par') }}
            </div>
            <div>-</div>
          </div>
        </div>
      </div>
    </a-form>
  </a-modal>
</template>

<style lang="less" scoped>
  .hole-table {
    border: 1px solid rgb(var(--gray-3));
    border-radius: 3px 3px 0 0;
    &:deep(input) {
      text-align: center;
    }
    &-header {
      text-align: center;
      border-bottom: 1px solid rgb(var(--gray-3));
      line-height: 32px;
      background: rgb(var(--gray-1));
      padding: 0 12px;
      border-radius: 3px 3px 0 0;
    }
    &-tb {
      display: flex;
      & > div {
        flex: 1;
        min-width: 0;
        text-align: center;
        &:last-child {
          & > div {
            border-right: none;
          }
        }
        & > div {
          padding: 0 5px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-bottom: 1px solid rgb(var(--gray-3));
          border-right: 1px solid rgb(var(--gray-3));
          &.black {
            color: #fff;
            background: #222;
          }
          &.gold {
            color: #333;
            background: rgb(var(--gold-6));
          }
          &.blue {
            color: #fff;
            background: rgb(var(--blue-6));
          }
          &.white {
            color: #333;
          }
          &.red {
            color: #fff;
            background: rgb(var(--red-6));
          }
          &.purple {
            color: #fff;
            background: rgb(var(--purple-6));
          }
          &:last-child {
            border-bottom: none;
          }
        }
      }
    }
  }
</style>
